<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>	
		<style>
			/*body*/
			#one span,#two span,#three span,#four span,#b ul li a span,#c ul li a span,#top_p_span01,#top_p_span02,
			#pimg_top_left span,#pimg_center_left span,#pimg_bottom_left span,#footer_right_center ul li span{
				background-image: url(img/img-sprite.png);
			}
			/*header*/
			#header{background: url(img/banner.jpg);background-size: cover;}
			
			/*content*/
			#content_right{background-image: url(img/pi1.jpg);}
			
			#left_left{background: url(img/pi2.jpg) no-repeat;}
			#left_center{background: url(img/pi3.jpg) no-repeat;}
			#left_right{background: url(img/pi4.jpg) no-repeat;}
			
			#center_left{background: url(img/PI8.jpg) no-repeat;}
			#center_center{background:url(img/pi9.jpg) no-repeat;}
			#center_right{background: url(img/pi10.jpg) no-repeat;}
			
			#right_left{background: url(img/pi5.jpg) no-repeat;}
			#right_center{background: url(img/pi6.jpg) no-repeat;}
			#right_right{background: url(img/pi7.jpg) no-repeat;}
			
			#content_two{background: url(img/back.jpg) no-repeat;background-size:cover;}
			
			#three_top_right{background: url(img/bl1.jpg) no-repeat;}
			
			#three_bottem{background: url(img/back1.jpg) no-repeat;}
			
			/*footer*/
			#pimg_top_right{background: url(img/f1.jpg) no-repeat;}
			#pimg_center_right{background: url(img/f2.jpg) no-repeat;}
			#pimg_bottom_right{background: url(img/f3.jpg) no-repeat;}
	
		</style>
	</head>

	<body>
		<div id='container'>
<!--header-->
			<div id="header">
				<div id="header_outer">
					<div id="header_inner">
						<div id="one"><span></span>
							<a href="contact.html">Info@example.com</a>
						</div>
						<div id="two"><span></span>
							<a href="contact.html">04622616161</a>
						</div>
						<div id="three"><span></span>
							<a href="register.html">Create an Account</a>
						</div>
						<div id="four"><span></span>
							<a href="login.html">Login</a>
						</div>
					</div>
					<div id="a">Amberegul</div>
					<div id="b">
						<ul>
							<li>
								<a href="index.html">Home</a>
							</li>
							<li>
								<a href="checkout.html">Pages</a>
							</li>
							<li>
								<a href="single.html">Blog</a>
							</li>
							<li>
								<a href="product.html">Products</a>
							</li>
							<li>
								<a href="contact.html">Contact</a>
							</li>
							<li>
								<a href="checkout.html"><span></span></a>
							</li>
						</ul>
					</div>
					<div id="c">
						<ul>
							<li><a href="checkout.html">$0.00(0 items)</a></li>
							<li><a href="checkout.html"><span></span></a></li>
							<li><a href="#" id="cart-toggle">Empty Cart</a></li>
						</ul>
						<div id="cart-dropdown" style="display:none;position:absolute;background:#fff;padding:10px;border:1px solid #ddd;">
							<p>Your cart is empty</p>
						</div>
					</div>
				</div>

				<div id="info">
					<div id="info_top">
						<span>THIS IS AMBEREGUL</span>
						<p>This theme for high selling fashion such as lothings,shoes,bags,</p>					 	
						<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					   		&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					   		&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					   		fashion for men,women,accessories,etc.
						</p>
					</div>
					
					<div id="info_bottom">
						<ul>
							<li>
								<a href="checkout.html">Explore</a>
							</li>
							<li>
								<a href="checkout.html">Shop Now</a>
							</li>
						</ul>
					</div>
				</div>				
			</div>		
<!--content-->		
			<div id="content">
<!--content_one-->
				<div id="content_one">
					<div id="content_one_top">
						<div id="content_left">
							<div id="content_left_top">
								<div class="womenShoes">
									<h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Women<br>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Shoes
									</h1>
									<img src="img/sh.png"/>
								</div>
								<div class="womenBags">
									<h1>&nbsp;&nbsp;&nbsp;&nbsp;Women<br>&nbsp;&nbsp;&nbsp;&nbsp;Bags</h1>
									<img src="img/ba.png" />
								</div>
							</div>
							<div id="content_left_bottom">						
								<div id="member_discount_a">
									<h1>&nbsp;&nbsp;&nbsp;&nbsp;MEMBBER DISCOUNT</h1>
								</div>
								<div id="member_discount_b">
									<ul><li><a href="#">SHOP NOW</a></li></ul>
								</div>						
							</div>			
						</div>
					
						<div id="content_right">
							<div class="mask">
								<div id="mask_c">
									<h1>FASHION<br>Get up to</h1>
									<hr width="80%" size="2" color="bisque"/>
									<p>60%</p>
								</div>				
			 	   			</div>
						</div>
					</div>
				
					<hr width="10%" />
				
					<div id="content_one_bottom">
						<h1 align="center">LATES ARRIVAL</h1>
						<div id="nav">
							<ul>
								<li id="ads1"><a href="#">WOMENS</a></li>
								<li id="ads2"><a href="#">MENS</a></li>
								<li id="ads3"><a href="#">SHOES</a></li>
							</ul>
						</div>
						<!--<div style="clear: both; border: none; height: 0;"></div>-->
						<div id="ads">
							<div class="show">
								<ul>
									<li><a href="#"><span id="left_left"></span></a></li>
									<li>
										<a href="#">
											<span id="left_center">
												<ul>
													<li><p>NEW</p></li>
												</ul>											
											</span>
										</a>
									</li>
									<li>
										<a href="#">
											<span id="left_right">
												<ul>
													<li><p>SALE<br>30%</p></li>
												</ul>
										</span>
										</a>
									</li>
								</ul>
							</div>
							<div class="hide">
								<ul>
									<li><a href="#"><span id="center_left"></span></a></li>
									<li><a href="#"><span id="center_center"></span></a></li>
									<li><a href="#"><span id="center_right"></span></a></li>
								</ul>
							</div>
							<div class="hide">
								<ul>
									<li><a href="#"><span id="right_left"></span></a></li>
									<li><a href="#"><span id="right_center"></span></a></li>
									<li><a href="#"><span id="right_right"></span></a></li>
								</ul>
							</div>
						</div>
					</div>
				</div>	
<!--content_two-->				
				<div id="content_two">
					<div id="two_left"></div>
					<div id="two_center">
						<div id="two_center_p">
							<p>Design is a funny word.Some people think design</p>
							<p>means how it looks.But of course,if you dig deeper it is</p>
							<p>really how it works.</p>
							<p>Steve Jobs</p>
						</div>						
					</div>
					<div id="two_right"></div>
				</div>
<!--content_three-->
				<div id="content_three">
					<span><u>Latest News</u></span>
					<div id="three_top">
						<div id="three_top_left">
							<div id="three_top_left_top">
								<div id="left_top_img">									
									<div>
										<a href="#"><img src="img/bl2.jpg"/></a>
									</div>
									<div>
										<a href="#"><img src="img/bl.jpg"/></a>
									</div>									
								</div>
								<div id="left_top_p">
									<span id="top_p_span">Iniloh Judulnya
										<ul>
											<li><span id="top_p_span01"></span></li>
											<li><span id="top_p_span02"></span></li>
										</ul>
									</span>
									
									Saturday,23/08/2014<br /><br />
									<p>Lorem ipsum dolor sit amet,consectetuer<br/>
										adipiscing elit,sed diam nonummy nibh<br />
										euismod tincidunt ut laoreet dolore magna<br />
										aliquam erat volutpat......
									</p>
									<ul>
										<li><a href="#">Readmore</a></li>
									</ul>
								</div>
							</div>
							<div id="three_top_left_bottem">
								<div id="left_bottem_img">
									<div id="bottem_img_p">
										Discount Up to
										<span>60%</span>
									</div>
								</div>
								<div id="left_bottem_p">
									<span>Iniloh Judulnya</span>
									Saturday,23/08/2014<br /><br />
									<p>Lorem ipsum dolor sit amet,consectetuer<br/>
										adipiscing elit,sed diam nonummy nibh<br />
										euismod tincidunt ut laoreet dolore magna<br />
										aliquam erat volutpat......
									</p>
									<ul>
										<li><a href="#">Readmore</a></li>
									</ul>
								</div>
							</div>
						</div>
						<div id="three_top_right">
							<div id="top_right_p">
								Get up to
								<span>60%</span>
								<p>Lorem ipsum dolor amet,consectetuer<br />
									elit adipiscing,sed diam nonummy nibh<br />
									euismod tincidunt  ut laoreet dolore<br />
									magna erat aliquam volutpat.
								</p>
							</div>
						</div>
					</div>
					<div id="three_bottem">
						<div id="three_bottem_p">
							<span>Best fit for women is feet</span>
							<p>TRY TO WALK IN OUR SHOES</p>
						</div>
					</div>
				</div>
			</div>
<!--footer-->		
			<div id="footer">
				<div id="footer_content">
					<div id="footer_left">
						<p>QUICK CONTACT</p>
						<hr  width="100%" color="#000000" size="1"/><br />
						<ul id="ul01">
							<li></li>
							<li>ENTER YOUR EMAIL*</li>
							<li>ENTER YOUR PHONE</li>
						</ul>
						<ul id="ul02">
							<li>ENTER YOUR MESSAGE*</li>
						</ul>
						<ul id="ul03">
							<li><a href="#">SEND MESSAGE</a></li>
						</ul>
					</div>
					<div id="footer_center">
						<p>TOP RATED PRODUCTS</p>
						<hr  width="100%" color="#000000" size="1"/>
						<div id="center_pimg">
							<div id="pimg_top">
								<div id="pimg_top_left">
									<p id="p_top">Winter Combo Style</p>
									<span></span><span></span><span></span><span></span><span></span>
									<p id="p_bottom"><s>$70.00</s>$40.00</p>
								</div>
								<div id="pimg_top_right">
									<ul><li></li></ul>
								</div>
							</div>
							<div id="pimg_center">
								<div id="pimg_center_left">
									<p id="p_top">Winter Combo Style</p>
									<span></span><span></span><span></span><span></span><span></span>
									<p id="p_bottom"><s>$70.00</s>$40.00</p>
								</div>
								<div id="pimg_center_right">
									<ul><li></li></ul>
								</div>
							</div>
							<div id="pimg_bottom">
								<div id="pimg_bottom_left">
									<p id="p_top">Winter Combo Style</p>
									<span></span><span></span><span></span><span></span><span></span>
									<p id="p_bottom"><s>$70.00</s>$40.00</p>
								</div>
								<div id="pimg_bottom_right">
									<ul><li></li></ul>
								</div>
							</div>
						</div>
					</div>
					<div id="footer_right">
						<div id="footer_right_top">
							<div id="top_img">
								 <img src="img/lo.png"/>
							</div>
							<div id="top_p">
								<h3>Amberegul Theme</h3>
								<p>Was designed for opencart,<br />
									magento,woocommerce and<br />
									prestashop platforms.It is<br />
									based on Bootstarp.
								</p>
							</div>
						</div>
						<div id="footer_right_center">
							<div id="center_auto">
								<p>Bandung,Indonesia</p>
								<p>40553</p>
								<ul>
									<li><span id="span1"></span>+62&nbsp;226759804</li>
									<li><span id="span2"></span>blithemes</li>
									<li><span id="span3"></span>info@example.com</li>
									<li><span id="span4"></span>http://example.com</li>
								</ul>
							</div>
						</div>
						<div id="footer_rigth_bottem">
							<div id="bottem_auto">
								<img src="img/pa.png"/>
							</div>
						</div>
					</div>
					<hr width="100%" size="1" color="#000000"/>
					<p align="center">Copyright&nbsp;&copy;&nbsp;2015 Company name All rights reserved.</p>
				</div>			
			</div>
			
		</div>
		<script>
			//content_one_bottom
			var lis = document.getElementById('nav').getElementsByTagName('li');
			var divs = document.getElementById('ads').getElementsByTagName('div');
			var i, j;
			for(i = 0; i < lis.length; i++) {
				lis[i].onmouseover = function() {
					//no用来确定当前划过的是哪个item，由此确定哪个广告版显示
					var no = this.id.substring(this.id.length - 1) - 1;
					for(j = 0; j < divs.length; j++) {
						divs[j].className = 'hide';
					}
					divs[no].className = 'show';
				}
			}
			
			//content_three  three_top_left_top
			var target = document.getElementById('left_top_img');
			var div = target.getElementsByTagName('div');
			var showNo = 0;
			//相当于往下一页的功能
			function nextPage() {
				//所有的div都隐藏
				for(var i = 0; i < div.length; i++)
					div[i].style.display = 'none';
				// 
				div[showNo].style.display = 'block';
				showNo = (showNo + 1) % div.length;
			}
			//切换到上一页的功能
			function prePage() {
				//所有的div都隐藏
				for(var i = 0; i < div.length; i++)
					div[i].style.display = 'none';
				// 
				div[showNo].style.display = 'block';
				showNo = (showNo - 1+div.length) % div.length;
			}
			var t1 = setInterval(nextPage, 3000);
			
			var lis=document.getElementById('top_p_span').getElementsByTagName('li');
			lis[0].onclick=prePage;
			lis[1].onclick=nextPage;
			prePage();
	
		</script>
		<script>
			// 购物车点击事件
			document.getElementById('cart-toggle').onclick = function(e) {
				e.preventDefault();
				var cart = document.getElementById('cart-dropdown');
				cart.style.display = cart.style.display === 'none' ? 'block' : 'none';
			};
		</script>
	</body>

</html>